<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 新增试题按钮 -->
   <div class="btnQuestions">
 <el-button type="success" @click="$router.push('/questions/new')" icon="el-icon-edit">新增试题</el-button>
    </div>
    <!-- 表单开始 -->
   <el-form ref="fromData" label-width="80px" size="small">
 <el-row>
   <!-- 学科 -->
  <el-col :span="6">
    <el-form-item label="学科">
    <el-select  @change="changeSecondLevel"  v-model="newQuestions.subjectID" placeholder="请选择" style="width:100%">
      <el-option v-for="item in subjectOptions" :key='item.value' :label="item.label" :value="item.value"></el-option>
    </el-select>
     </el-form-item>
  </el-col>
  <!-- 二级目录 -->
    <el-col :span="6">
    <el-form-item label="二级目录" prop="catalogID">
    <el-select v-model="newQuestions.catalogID" placeholder="请选择" style="width:100%">
      <el-option v-for="item in secondLevel" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
     </el-form-item>
  </el-col>
  <!-- 标签 -->
    <el-col :span="6">
    <el-form-item label="标签" prop="tags">
    <el-select v-model="newQuestions.tags" placeholder="请选择" style="width:100%">
      <el-option v-for=" item in tagList " :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
     </el-form-item>
  </el-col>
  <!-- 关键字 -->
  <el-col :span="6">
    <el-form-item label="关键字" prop="keyword">
    <el-input  v-model="newQuestions.keyword"></el-input>
  </el-form-item>
  </el-col>
</el-row>
<el-row>
  <!-- 试题类型 -->
    <el-col :span="6">
    <el-form-item label="试题类型" prop="questionType">
    <el-select v-model="newQuestions.questionType" placeholder="请选择" style="width:100%">
      <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
     </el-form-item>
  </el-col>
  <!-- 难度 -->
    <el-col :span="6">
    <el-form-item label="难度" prop="difficulty">
    <el-select v-model="newQuestions.difficulty" placeholder="请选择" style="width:100%">
      <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
     </el-form-item>
  </el-col>
  <!-- 方向 -->
    <el-col :span="6">
    <el-form-item label="方向" prop="direction">
    <el-select v-model="newQuestions.direction" placeholder="请选择" style="width:100%">
      <el-option v-for="item in direction" :key="item"  :label="item" :value="item"></el-option>
    </el-select>
     </el-form-item>
  </el-col>
  <!-- 录入人 -->
    <el-col :span="6">
    <el-form-item label="录入人" prop="creatorID">
    <el-select v-model="newQuestions.creatorID" placeholder="请选择" style="width:100%">
      <el-option v-for="item in username" :key="item.id" :label="item.username" :value="item.id"></el-option>
    </el-select>
     </el-form-item>
  </el-col>
</el-row>
<el-row>
  <!-- 题目备注 -->
   <el-col :span="6">
    <el-form-item label="题目备注" prop="remarks">
    <el-input v-model="newQuestions.remarks"></el-input>
  </el-form-item>
  </el-col>
  <!-- 企业简称 -->
   <el-col :span="6">
    <el-form-item label="企业简称" prop="shortName">
    <el-input v-model="newQuestions.shortName"></el-input>
  </el-form-item>
  </el-col>
  <!-- 城市 -->
    <el-col :span="6">
     <el-form-item label="城市" prop="city">
    <el-select v-model="newQuestions.city" @change="changeCity" placeholder="请选择" style="width:48%; margin-right: 2%; " >
      <el-option v-for="item in provinces" :key="item" :label="item" :value="item">
      </el-option>
    </el-select>

    <el-select v-model="newQuestions.province" placeholder="请选择" style="width:50%">
      <el-option v-for="item in citys" :key="item" :label="item" :value="item"></el-option>
    </el-select>
     </el-form-item>
  </el-col>
  <!-- 清除 搜索 -->
  <el-col :span='6' >
    <el-form-item style="text-align:right">
     <el-button size='mini' @click="empty('fromData')">清除</el-button>
      <el-button size='mini' type="primary" @click="grabble" >搜索</el-button>
    </el-form-item>
  </el-col>
</el-row>
</el-form>
<!-- 表单结束 -->
  <!-- tab导航栏 -->
 <el-tabs v-model="activeName" type="card" @tab-click="handleClick" >
    <el-tab-pane label="全部" name="all"></el-tab-pane>
    <el-tab-pane label="待审核" name="checkPending"></el-tab-pane>
    <el-tab-pane label="已审核" name="checked"></el-tab-pane>
    <el-tab-pane label="已拒绝" name="denied"></el-tab-pane>

     <!-- 提示 -->
    <el-alert
    :title="`数据一共${totalAll}条`"
    type="info"
    show-icon
    :closable='false'
    >
  </el-alert>
  <!-- 列表 -->
   <el-table
      :data="grabbleList"
      style="width: 100%">
      <el-table-column
        prop="number"
        width="120px"
        label="试题编号"
        >
      </el-table-column>
      <el-table-column
        prop="subject"
        width="120px"
        label="学科"
        >
      </el-table-column>
      <el-table-column
        prop="catalog"
        width="120px"
        label="目录" >
      </el-table-column>
      <el-table-column
        prop="questionType"
        width="120px"
        label="题型">
        <template  #default='{row}'>
          {{

             questionType.find(item=>item.value+''=== row.questionType).label
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="question"
        width="280px"
        label="题干" >
          <template #default='{row}'>
      <span v-html="row.question"></span>
          </template>
      </el-table-column>
      <el-table-column
        prop="addDate"
        width="180px"
        label="录入时间"  >
        <template #default='{row}'>
           {{row.addDate | parseTimeByString  }}
        </template>
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度">
        <template #default='{row}'>
           {{
             difficulty.find(item=>item.value+''===row.difficulty).label
           }}
        </template>
      </el-table-column>
      <el-table-column
        prop="creator"
        width="120px"
        label="录入人">
      </el-table-column>
      <el-table-column
        prop="chkState"
        width="150px"
        label="审核状态">
        <template #default='{row}'>
          {{
         chkType.find(item => item.value === row.chkState).label
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="chkRemarks"
        width="150px"
        label="审核意见">
      </el-table-column>
      <el-table-column
        prop="chkUser"
        width="120px"
        label="审核人">
      </el-table-column>
      <el-table-column
        prop="publishState"
        width="150px"
        label="发布状态">
        <template #default='{row}'>
              {{
          publishType.find(item => item.value === row.publishState).label
              }}
          </template>
      </el-table-column>

       <el-table-column
      fixed="right"
      label="操作"
      align='center'
      width="200px"

      >
      <template slot-scope="scope">
          <el-button  @click="previewClick(scope.row)" type="text" size="small">预览</el-button>
        <el-button @click="audit(scope.row)" type="text" size="small" :disabled="scope.row.chkState !==0">审核</el-button>
        <el-button :disabled="scope.row.publishState ===1" @click="$router.push(`/questions/new?id=${scope.row.id}`)" type="text" size="small">修改</el-button>
        <el-button type="text" size="small" @click="publishState(scope.row)">{{
          scope.row.publishState === 1 ? '下架' : '上架'
          }}</el-button>
        <el-button :disabled="scope.row.publishState ===1" type="text" size="small" @click="del(scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>

  </el-tabs>

     <!-- 分页 -->
      <el-pagination
      background
      style="text-align: right;"
      @size-change="handleSizeChange"
      :current-page="newQuestions.page"
       @current-change="pagers"
      :page-size="newQuestions.pagesize"
      :page-sizes="[1, 2, 3, 4, 5]"
      layout=" total, prev, pager, next, sizes, jumper"
      :total="totalAll"
      >
    </el-pagination>

    <!-- 审核 -->
    <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  @close="handleClose = false">
  <!-- 单选 -->
    <el-radio v-model="radio" :label="1">通过</el-radio>
     <el-radio v-model="radio" :label="2">拒绝</el-radio>
  <!-- 输入框 -->
  <el-input
  style="margin-top: 10px;"
  type="textarea"
  autosize
  placeholder="请输入审核意见"
  v-model="textarea1">
</el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="auditShenghe">确 定</el-button>
  </span>
</el-dialog>
<!-- 预览对话框 -->
<preview-choice :preview ='preview' :previewArticle.sync='previewArticle'></preview-choice>
</el-card>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { simple as reqsecondLevel } from '@/api/hmmm/directorys.js'
import { simple as reqLabel } from '@/api/hmmm/tags.js'
import { questionType, difficulty, direction, chkType, publishType } from '@/api/hmmm/constants.js'
import { simple as usersList } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { choice, remove as reqRemove, choicePublish, choiceCheck, detail } from '@/api/hmmm/questions.js'
import PreviewChoice from '../components/preview-choice.vue'

export default {
  components: { PreviewChoice },
  name: 'choice',
  data () {
    return {
      preview: {},
      previewArticle: false,
      textarea1: '', // 审核输入框
      radio: 1, // 审核单选默认值
      dialogVisible: false, // 控制审核对话框的显隐
      publishType, // 发布状态
      chkType, // 审核状态
      questionType, // 试题类型
      difficulty, // 难度
      direction, // 方向
      username: [], // 用户
      provinces, // 城市
      citys, // 地区
      grabbleList: [], // 全部数据
      newQuestions: {
        subjectID: null, // 学科
        catalogID: null, // 二级目录
        tags: null, // 标签
        keyword: null, // 关键字
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        city: null, // 企业所在城市
        province: null, // 企业所在地省份
        page: 1, // 当前页数
        pagesize: 5// 每页条数

      },
      subjectOptions: [], // 学科选项
      secondLevel: [], // 二级目录
      tagList: [], // 标签列表
      activeName: 'all', // tab导航栏
      allList: [], // 全部
      totalAll: 0, // 总页数
      row: {}
    }
  },
  async  created () {
    // 学科列表
    const { data } = await simple()
    this.subjectOptions = data

    // 获取用户列表
    const { data: res } = await usersList()
    this.username = res
    this.provinces = provinces()
    this.handleClick()
  },
  methods: {
    // 二级目录
    async changeSecondLevel (subjectID) {
      // 获取二级目录列表
      const { data } = await reqsecondLevel({ subjectID })
      this.secondLevel = data
      // console.log(subjectID)
      // 获取标签列表
      const { data: tags } = await reqLabel({ subjectID })
      this.tagList = tags
    },
    // tab导航栏
    async handleClick () {
      // 全部列表

      const { data: { items, counts } } = await choice(this.newQuestions)
      // 获得总条数

      this.totalAll = counts

      if (this.activeName === 'all') {
        // 所有列表
        this.grabbleList = items
      }
      // 待审核
      if (this.activeName === 'checkPending') {
        this.grabbleList = items.filter(item => item.chkState === 0)
      }
      // 已审核
      if (this.activeName === 'checked') {
        this.grabbleList = items.filter(item => item.chkState === 1)
      }
      // 已拒绝
      if (this.activeName === 'denied') {
        this.grabbleList = items.filter(item => item.chkState === 2)
      }
    },
    // 处理城市和地区
    changeCity () {
      this.citys = citys(this.newQuestions.city)
    },
    // 清除事件
    empty () {
      this.newQuestions1()
    },
    // 清空表单
    newQuestions1 () {
      this.newQuestions = {
        subjectID: null, // 学科
        catalogID: null, // 二级目录
        tags: null, // 标签
        keyword: null, // 关键字
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        city: null, // 企业所在城市
        province: null // 企业所在地省份

      }
    },
    // 搜索
    async  grabble () {
      this.newQuestions.page = 1
      // 发送请求
      this.handleClick()
    },

    // pageSize 改变时会触发  每页条数
    handleSizeChange (val) {
      // 获得每页条数
      this.newQuestions.pagesize = val
      // 重新渲染
      this.handleClick()
    },
    // currentPage 改变时会触发 当前页
    pagers (val) {
      // 获得当前页
      this.newQuestions.page = val
      // 重新渲染
      this.handleClick()
    },
    // 删除
    del (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        // 发送删除请求
        await reqRemove(row)
        // 重新渲染
        this.handleClick()
        // 删除成功提示
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.error('取消删除')
      })
    },
    // 上架下架
    async publishState (row) {
      this.$confirm(`您确定要${row.publishState === 0 ? '上架' : '下架'}这道题目吗?`, {
        type: 'warning'
      }).then(async () => {
        row.publishState = row.publishState === 1 ? 0 : 1
        const data = await choicePublish(row)
        console.log(data)
        const aaa = row.publishState === 0 ? '下架成功' : '上架成功'
        this.$message.success(aaa)
      })
    },
    // 打开对话框
    audit (row) {
      this.dialogVisible = true
      this.row = row
    },
    // 审核
    async auditShenghe () {
      if (this.textarea1.trim() === '') return this.$message.error('请输入审核意见')
      await choiceCheck({ ...this.row, chkRemarks: this.textarea1, chkState: this.radio })
      this.dialogVisible = false
    },
    // 预览
    async previewClick (row) {
      this.previewArticle = true
      const { data } = await detail({ id: row.id })
      this.preview = data
    }

  }

}
</script>

<style scoped lang='scss'>
  .btnQuestions{

    text-align: right;
    margin-bottom: 10px;
  }
</style>
